<template>
	<div class="invoice-admin">
		<div class="invoice-admin__header">
			<a-form :model="form" label-align="left">
				<a-form-item field="value1" label="账号" label-col-flex="56px">
					<a-input v-model="form.userSearchText" class="form__input" placeholder="手机号/用户名/用户ID" />
				</a-form-item>
				<a-form-item field="value1" label="联系人" label-col-flex="56px">
					<a-input v-model="form.phone" class="form__input" placeholder="联系人手机号" />
				</a-form-item>
				<a-form-item field="value1" label="申请时间" label-col-flex="56px">
					<a-range-picker
						v-model="form.searchTime"
						value-format="timestamp"
						:style="{ width: '229px', marginRight: '32px' }"
					/>
				</a-form-item>
				<a-form-item class="no-label">
					<a-button type="primary" :style="{ marginRight: '12px' }" @click="onSearchClick">查询</a-button>
					<a-button @click="resetForm">重置</a-button>
				</a-form-item>
			</a-form>
		</div>
		<a-tabs v-model:active-key="activeKey" class="invoice-admin__tabs" @tab-click="tabClick">
			<a-tab-pane :key="0" title="未开票">
				<a-table :columns="uninvoicedAdminColumns" :data="uninvoicedAdminData" :pagination="false">
					<template #applyTime="{ record }">
						{{ dateFormat(record.applyTime) }}
					</template>
					<template #invoiceAmount="{ record }">
						{{ record.invoiceAmount }}
					</template>
					<template #invoiceType="{ record }">
						{{ invoiceTypeMaps[record.invoiceType] }}
					</template>
					<template #operation="{ record }">
						<span
							class="operation__item"
							@click="changeInvoiceDetailsDrawerVisible(true, record.id, record)"
							>查看</span
						>
						<span
							v-if="[0, 1].includes(Number(adminInfo?.adminType))"
							class="operation__item"
							@click="changeModelVisible(true, record.invoiceType, record.id)"
							>开票</span
						>
					</template>
				</a-table>
			</a-tab-pane>
			<a-tab-pane :key="1" title="已开票">
				<a-table :columns="invoiceAdminColumns" :data="invoiceAdminData" :pagination="false">
					<template #invoiceTime="{ record }">
						{{ dateFormat(record.invoiceTime) }}
					</template>
					<template #invoiceAmount="{ record }">
						{{ record.invoiceAmount }}
					</template>
					<template #invoiceType="{ record }">
						{{ invoiceTypeMaps[record.invoiceType] }}
					</template>
					<template #operation="{ record }">
						<span
							class="operation__item"
							@click="changeInvoiceDetailsDrawerVisible(true, record.id, record)"
							>查看</span
						>
					</template>
				</a-table>
			</a-tab-pane>
		</a-tabs>
		<div class="invoice-admin__pagination">
			<a-pagination v-model:current="current" :total="total" @change="getInvoiceRecords" />
		</div>
		<invoice-modal
			:visible="modelVisible"
			:invoice-type="nowInvoiceType"
			:order-id="nowOrderId"
			@change-model-visible="changeModelVisible"
			@update-invoice-records="getInvoiceRecords"
		/>
		<invoice-details-drawer
			:visible="invoiceDetailsDrawerVisible"
			:order-id="nowOrderId"
			:order-data="nowOrderData"
			:invoice-type="nowInvoiceType"
			@change-invoice-details-drawer-visible="changeInvoiceDetailsDrawerVisible"
		/>
	</div>
</template>

<script setup lang="ts">
import { ref, toRefs, reactive } from 'vue';
import { order } from '@/api';
import dateFormat from 'ourwill-feutil/common/dateFormat';
import invoiceDetailsDrawer from './components/invoiceDetailsDrawer.vue';
import invoiceModal from './components/invoiceModal.vue';
import { useUserStore } from '@/store';

const userStore = useUserStore();
const { adminInfo } = toRefs(userStore);

const activeKey = ref<number>(0);
const onSearchClick = () => {
	current.value = 1;
	getInvoiceRecords();
};
const tabClick = () => {
	current.value = 1;
	getInvoiceRecords();
};
const form: any = ref({
	searchTime: ['', ''],
	phone: '',
	userSearchText: '',
});
const resetForm = () => {
	form.value = {
		searchTime: ['', ''],
		phone: '',
		userSearchText: '',
	};
	getInvoiceRecords();
};
// 未开票
const uninvoicedAdminColumns: any = [
	{
		title: '申请时间',
		dataIndex: 'applyTime',
		slotName: 'applyTime',
	},
	{
		title: '手机号',
		dataIndex: 'phone',
	},
	{
		title: '收件邮箱/地址',
		dataIndex: 'addressDisplay',
	},
	{
		title: '发票类型',
		dataIndex: 'invoiceType',
		slotName: 'invoiceType',
	},
	{
		title: '发票金额（元）',
		dataIndex: 'invoiceAmount',
		slotName: 'invoiceAmount',
	},
	{
		title: '操作',
		slotName: 'operation',
	},
];
const uninvoicedAdminData = ref([]);
// 已开票
const invoiceAdminColumns: any = [
	{
		title: '开票时间',
		dataIndex: 'invoiceTime',
		slotName: 'invoiceTime',
	},
	{
		title: '手机号',
		dataIndex: 'phone',
	},
	{
		title: '收件邮箱/地址',
		dataIndex: 'addressDisplay',
	},
	{
		title: '发票类型',
		dataIndex: 'invoiceType',
		slotName: 'invoiceType',
	},
	{
		title: '发票金额（元）',
		dataIndex: 'invoiceAmount',
		slotName: 'invoiceAmount',
	},
	{
		title: '开票人',
		dataIndex: 'drawerName',
	},
	{
		title: '操作',
		slotName: 'operation',
	},
];
const invoiceAdminData = ref([]);

const invoiceDetailsDrawerVisible = ref(false);
const changeInvoiceDetailsDrawerVisible = (v: boolean, orderId?: number, orderData?: object) => {
	invoiceDetailsDrawerVisible.value = v;
	if (orderId) {
		nowOrderId.value = orderId;
	}
	if (orderData) {
		nowOrderData.value = orderData;
	}
};

// 当前票的类型 0：电子票 1：专用票
const nowInvoiceType = ref<number>(0);
const modelVisible = ref(false);
const nowOrderId = ref<number | ''>('');
const nowOrderData = ref<object | ''>('');
const changeModelVisible = (v: boolean, invoiceType?: number, orderId?: number) => {
	modelVisible.value = v;
	if (invoiceType !== null && invoiceType !== undefined) {
		nowInvoiceType.value = invoiceType;
	}
	if (orderId) {
		nowOrderId.value = orderId;
	}
};

const total = ref<number>(0);
const current = ref<number>(1);
const invoiceTypeMaps: any = {
	0: '电子发票',
	1: '专用发票',
};
const getInvoiceRecords = async () => {
	if (!form.value.searchTime) {
		form.value.searchTime = ['', ''];
	}
	const params = {
		pageNum: current.value,
		pageSize: 10,
		userSearchText: form.value.userSearchText,
		phone: form.value.phone,
		startTime: form.value.searchTime[0],
		endTime: form.value.searchTime[1],
	};
	const { ok, data } = await order.getInvoiceRecords(activeKey.value, params);
	if (!ok) {
		return;
	}
	if (activeKey.value === 0) {
		uninvoicedAdminData.value = data.data.records;
	} else {
		invoiceAdminData.value = data.data.records;
	}
	total.value = data.data.total;
};
getInvoiceRecords();
</script>

<style lang="less">
.invoice-admin {
	min-height: 100%;
	background: #fff;
	box-sizing: border-box;
	padding: 24px 24px 0;
	position: relative;
	padding-bottom: 48px;

	.invoice-admin__header {
		.arco-form {
			display: flex;
			flex-direction: row;

			.no-label {
				.arco-form-item-label-col {
					display: none;
				}
			}

			.form__input {
				width: 218px;
				margin-right: 32px;
			}
		}
	}

	.invoice-admin__tabs {
		.arco-tabs-tab {
			&:nth-of-type(1) {
				margin-left: 0;
			}
		}

		.operation__item {
			color: #386cff;
			font-size: 14px;
			cursor: pointer;

			+ .operation__item {
				margin-left: 16px;
			}
		}
	}

	&__pagination {
		border-top: 1px solid #f1f1f1;
		height: 48px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		box-sizing: border-box;
		padding: 0 24px;
	}
}
</style>
